<!--
author: 何其沆(pooky)
desc: Contract
date: 2021-11-12
-->
<template>
  <div v-if="!contractDetailShow" class="contract">
    <search @search="handleSearch" @reset="handleReset">
      <div style="display: flex">
        <SearchInput searchText="Contract Number">
          <a-input v-model:value="contractNumber" />
        </SearchInput>
        <SearchInput searchText="Contract Name">
          <a-input v-model:value="contractName" />
        </SearchInput>
        <SearchInput searchText="Client Name">
          <a-input v-model:value="clientName" />
        </SearchInput>
        <SearchInput searchText="Type">
          <a-select v-model:value="type" @change="handleChange">
            <a-select-option value="0">All</a-select-option>
            <a-select-option value="1">Other</a-select-option>
          </a-select>
        </SearchInput>
      </div>
    </search>
    <e-container style="margin-top: 24px">
      <a-table
        :columns="columns"
        :data-source="data"
        class="ant-table-striped"
        :pagination="false"
        :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'contractNumber'">
            <a @click="showDetail(record)">{{ record.contractNumber }}</a>
          </template>
          <template v-else-if="column.key === 'attachment'">
            <span style="cursor: pointer" @click="download(record)">
              <e-icon type="Download" color="#3c6cfe" />
              <a style="margin-left: 4px">Download</a>
            </span>
          </template>
        </template>
        <template #emptyText>
          <e-empty />
        </template>
      </a-table>
      <div v-if="total > 0" class="pagination">
        <a-pagination
          v-model:current="current"
          v-model:pageSize="pageSize"
          :total="total"
          show-less-items
          :show-size-changer="false"
          @change="changeSize" />
      </div>
    </e-container>
  </div>
  <div v-else class="contract">
    <contract-detail @back="back" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import EContainer from '@/components/EContainer.vue'
import EIcon from '@/components/EIcon.vue'
import EEmpty from '@/components/EEmpty.vue'
import Search from '../../components/Search.vue'
import SearchInput from '../../components/SearchInput.vue'
import contractDetail from './components/Detail.vue'

import pageColumns from '@/assets/script/page_columns.js'
const contract = pageColumns.contract
// 列
const columns = reactive(contract)
const data = ref([
  {
    contractNumber: 'ecsy9555555555',
    contractName: '杰克森医疗产品翻译项目',
    clientName: '杰克森沈阳分部销售门店',
    type: 'Other',
    startDate: '2020-10-24',
    endDate: '2020-10-24',
    status: '正常'
  },
  {
    contractNumber: 'ecsy9555555555',
    contractName: '杰克森医疗产品翻译项目',
    clientName: '杰克森沈阳分部销售门店',
    type: 'Other',
    startDate: '2020-10-24',
    endDate: '2020-10-24',
    status: '正常'
  }
])
// 当前页码
const current = ref(1)
// 每页条数
const pageSize = ref(10)
// 总条数
const total = ref(2)
// 筛选条件
const contractNumber = ref('')
const contractName = ref('')
const clientName = ref('')
const type = ref('0')
// 是否显示详细信息
const contractDetailShow = ref(false)
/**
 * 获取列表数据
 * @returns {Promise<void>}
 */
const getList = async () => {}
/**
 * 搜索
 */
const handleSearch = () => {
  current.value = 1
  getList()
}
/**
 * 重置
 */
const handleReset = () => {
  contractNumber.value = ''
  contractName.value = ''
  clientName.value = ''
  type.value = '0'
}
/**
 * 切换Type
 * @param value
 */
const handleChange = value => {
  current.value = value
}
/**
 * 切换页码
 * @param cur
 */
const changeSize = cur => {
  current.value = cur
  getList()
}
/**
 * 下载
 * @param record
 */
const download = record => {
  console.log(record)
}
/**
 * 查看详细
 * @param record
 */
const showDetail = record => {
  console.log(record)
  contractDetailShow.value = true
}
/**
 * 返回
 */
const back = () => {
  contractDetailShow.value = false
}
/**
 * 初始化
 */
onMounted(() => {
  getList()
})
</script>

<style scoped lang="less">
@import '@/assets/style/reset_table';
@import '@/assets/style/reset_form';
.pagination {
  margin-top: 12px;
  display: flex;
  flex-direction: row-reverse;
}
</style>
<route lang="yaml">
name: Contract
path: /contract/
</route>
